<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #login{
            position: absolute;  
            top: 300px;
            bottom: 300px;
            right: 350px;
            left: 350px;
            border: 2px blue solid; 
            padding: 5px;
            height: 500px; 
            margin: auto;
            background-color: aquamarine;
            outline: brown dashed 5px;
            border-radius: 25px 25px 25px 25px; 
        }
        #loginlittle{
            display: inline;
            position: relative;
            top: 40px;
            bottom: 20px;
            left: 200px;
            right: 50px;
            margin: auto;
            padding: 10px;
            border: 2px black solid;
            outline: blueviolet dashed 5px;
            background-image:url(../imgaes/xin.png);
            background-color: beige;
            background-repeat: no-repeat;
            border-radius: 25px 25px 25px 25px; 
        }
        #button{
            position: relative;
            top: 100px;
            outline: chartreuse dashed 5px;
        }
        #ol{
            position: relative;
            background-color: antiquewhite;
            border: 5px red dashed;
            border-radius: 5px 5px 5px 5px;
            top: 300px;
            margin: auto;
        }
        #dd{
            position: relative;
            background-color: bisque;
            border: 5px yellowgreen dashed;
            top: 30px;
        }
    </style>
</head>
<body>
    <div id="login">
        登录框
        <div id="loginlittle">我是登录框里面的小登录框</div>
        <button id="button">点我啊~</button>
        <div id="ol">
        <ul></ul>
           <li>naruto</li>
           <li>sasuke</li>
           <li>sakura</li>
        </div>
        <section id="dd">
            <dl>
                <dt>徐阶</dt>
                <dd>明朝嘉靖年间的首辅</dd>
                <dt>高拱</dt>
                <dd>明朝隆庆年间的首辅</dd>
                <dt>张居正</dt>
                <dd>明朝万历年间的首辅</dd>
            </dl>
            <a href="www.910ee.com">澳门皇家赌场</a>
        </section>
    </div>
</body>
</html>